<template>
  <div class="refine_inlan">
    <!-- <router-view></router-view> -->
    <h2 class="titleblue">内网公告列表</h2>
    <div class="contant">
      <div @click="show" class="fl create" v-if="sysShow">发布内网公告</div>
      <div class="fr">
        <div class="inlanselect">
          <label>公告类型</label>
          <el-select v-model="type" class="select-width-100" clearable @change="searchNotice">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-input prefix-icon="el-icon-search" placeholder="搜索公告" v-model="search" clearable class="plansearch" @clear='clearInput'
                  @change="searchNotice">
          <template slot="append">搜索</template>
        </el-input>
      </div>
      <data-table :page='currentPage' :head="thead1" :data="tableData1" :actions="['edit','revoke','view']"
                  @callback="dataAction"></data-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper"
        :total="totalPage" background>
      </el-pagination>
    </div>

    <el-dialog title="" :visible.sync="publishDialog" width="80%" append-to-body @close="close1">
        <span>
            <router-view @close="close"  :detail="detail"></router-view>
        </span>
    </el-dialog>
  </div>
</template>
<script>
  import DataTable from '@/components/common/DataTable.vue'
  import * as noticeService from '@/services/NoticeService'
  import dictionaryService from '@/services/DictionaryService'
  import moment from 'moment'
  export default {
    components: {
      'data-table': DataTable,
    },
    data: function () {
      return {
        type: '',
        search: '',
        currentPage: 1,
        undoDialog: false,
        timer: 3,
        publishDialog: false,
        page: 10,
        totalPage: 0,
        options: [],
        detail: '',
        searchUrl:'',
        thead1: [
          { name: "公告类型", prop: "type", width: "170" },
          { name: "公告主题", prop: "title" },
          { name: "公告开始时间", prop: "publishBeginTime", width: "170" },
          { name: "公告结束时间", prop: "publishEndTime", width: "170" },
        ],
        tableData1: [],
        oldData:[],
        ooptions: [{ name: '编辑', prop: "edit" }, { name: '撤销', prop: "undo" }, { name: '查看', prop: "look" }],
        sysShow: false,
      };
    },
    async created() {
      this.sysShow = true;
      let options = await dictionaryService.find('GGLX');
      this.options = options.map((option)=>{
        return {
          "label": option.name,
          'value': option.id
        }
      });
        this.getData()
    },
    methods: {
      clearInput() {
        this.currentPage = 1;
        this.getData(1)
      },
      searchNotice() {
        this.currentPage = 1;
        this.getData(1)
      },
      submit: function () {
      },
      show() {
        this.detail = "create";
        this.publishDialog = true
        this.$router.push("/inner-notice/edit")
      },
      close() {
        this.publishDialog = false;
        this.getData(this.currentPage);
      },
      close1() {
        this.publishDialog = false;
        this.$router.go(-1)
      },
      dataAction(param) {
        if (param.action === "edit") {
          this.publishDialog = true
          this.detail = "edit";
          this.$router.push({ path: "/inner-notice/Edit", query: { type: 'edit', id: param.data.id} })
        }
        if (param.action === "view") {
          this.publishDialog = true
          this.detail = "look";
          this.$router.push({ path: "/inner-notice/Edit", query: { type: 'look', id: param.data.id,index:param.data.index,pageNum:this.currentPage,searchUrl:this.searchUrl} })
        }
        if (param.action === "revoke") {
          this.$confirm('撤出操作 前台公告信息将取消显示 您确定要执行此操作吗？', '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true
          }).then((res) => {
            let params = this.oldData[param.data.index];
            params.releaseFlag = false;
            noticeService.updateNotice(params).then(()=>{
              this.$alert("撤销成功", '提示');
              this.getData();
            })
          })
        }
      },
      undobtn() {
        this.undoDialog = false;
      },
      handleSizeChange(val) {
        this.currentPage = val
        this.getData();

      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getData();
      },
      getData() {
        let searchUrl = 'releaseFlag==true;intranetFlag==true;';
        if(this.type){
          searchUrl = (searchUrl?searchUrl:'')+'type=='+this.type+';';
        }
        if(this.search){
          searchUrl = (searchUrl?searchUrl:'')+'title=like='+this.search+';';
        }
        this.searchUrl = searchUrl;
        noticeService.noticeList({size: this.page, page: (this.currentPage-1),query:searchUrl}).then((res)=>{
          this.oldData = JSON.parse(JSON.stringify(res.data));
          this.tableData1 = res.data;
          this.tableData1.forEach((item,i)=>{
            var dateStartTime = item.publishBeginTime;
            var dateEndTime = item.publishEndTime;
            item.publishBeginTime = dateStartTime?moment(dateStartTime).format('YYYY-MM-DD HH:mm:ss'):'';
            item.publishEndTime = dateEndTime?moment(dateEndTime).format('YYYY-MM-DD HH:mm:ss'):'';
            item.index = i;
            this.options.forEach((option,k)=>{
              if(item.type===option.value){
                item.type = option.label;
              }
            })
          });
          this.totalPage = parseInt(res.headers['x-total-count'])
        });
      },
    }
  };
</script>
<style lang='scss'>
  .refine_inlan {
    width:100%;
    display: inline-block;

    .inlanselect{
      float: left;
      width:200px;
    }
    .plansearch{
      float: right;
      width:310px;
    }
    .plansearch input{
      width:230px;
      margin-right:10px;
      border-radius:0px;
    }
    .plansearch .el-input-group__append {
      border-left: 1px;
      width: 56px;
      background-color: #0062cd;
      border-radius: 2px;
      font-size: 14px;
      color: #ffffff;
    }
    .table{
      margin-top: 20px;
      width: 100%;
      display: inline-block;
    }

    .number{
      float: left;
      font-size: 12px;
    }
    .el-table tr:nth-child(2n){
      background:#FAFAFA
    }
    .el-table__body,
    .el-table__footer,
    .el-table__header {
      width: 100% !important;
    }

  }

  .el-message-box__message p{
    padding:0px 30px;
    text-align: left;
  }
  .el-message-box__btns .el-button{
    width: 110px;
    height: 36px;
    border: solid 1px #0062cd;
    padding:0;
    color:#0062cd;
  }
  .el-message-box__btns .el-button.el-button--primary{
    background-color: #0062cd;
    padding:0;
    color:#fff;
  }
</style>
